<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>知乎2024用户年度报告</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0f1c3f, #152852, #1a3365);
            color: #fff;
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
        }
        
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 0;
        }
        
        .container {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 10;
        }
        
        .header {
            text-align: center;
            padding: 30px 0 20px;
            position: relative;
        }
        
        .logo {
            width: 60px;
            height: 60px;
            background: #0084ff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            box-shadow: 0 5px 15px rgba(0, 132, 255, 0.4);
        }
        
        .logo i {
            font-size: 30px;
            color: white;
        }
        
        h1 {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 10px;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .subtitle {
            font-size: 16px;
            color: #a0b3d6;
            margin-bottom: 30px;
        }
        
        .card {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(0, 132, 255, 0.3);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .card-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: linear-gradient(135deg, #0084ff, #00c6ff);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }
        
        .card-icon i {
            font-size: 24px;
            color: white;
        }
        
        .card-title {
            font-size: 20px;
            font-weight: 600;
            color: #fff;
        }
        
        .card-subtitle {
            font-size: 14px;
            color: #a0b3d6;
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        .stat-item {
            text-align: center;
            flex: 1;
        }
        
        .stat-value {
            font-size: 32px;
            font-weight: 700;
            color: #4facfe;
            margin-bottom: 5px;
            position: relative;
            display: inline-block;
        }
        
        .stat-value::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            border-radius: 3px;
        }
        
        .stat-label {
            font-size: 14px;
            color: #a0b3d6;
        }
        
        .chart-container {
            height: 200px;
            margin-top: 20px;
            position: relative;
        }
        
        .flip-card {
            perspective: 1000px;
            height: 200px;
            margin: 20px 0;
        }
        
        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        
        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }
        
        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .flip-card-front {
            background: linear-gradient(135deg, #1a3365, #0f1c3f);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }
        
        .flip-card-back {
            background: linear-gradient(135deg, #0084ff, #00c6ff);
            transform: rotateY(180deg);
            box-shadow: 0 4px 20px rgba(0, 132, 255, 0.4);
        }
        
        .flip-card-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .flip-card-value {
            font-size: 42px;
            font-weight: 800;
            background: linear-gradient(to right, #fff, #e0f7ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .flip-card-desc {
            font-size: 16px;
            margin-top: 10px;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin-top: 20px;
        }
        
        .tag {
            background: rgba(255, 255, 255, 0.1);
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .tag:hover {
            background: #0084ff;
            transform: scale(1.05);
        }
        
        .btn {
            display: block;
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #0084ff, #00c6ff);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            margin: 30px 0;
            box-shadow: 0 5px 15px rgba(0, 132, 255, 0.4);
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 132, 255, 0.6);
        }
        
        .footer {
            text-align: center;
            padding: 20px 0;
            color: #a0b3d6;
            font-size: 14px;
        }
        
        .progress-bar {
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            margin: 15px 0;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            border-radius: 3px;
            width: 0;
            transition: width 1.5s ease-in-out;
        }
        
        .animated-text {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.8s ease;
        }
        
        .animate {
            opacity: 1;
            transform: translateY(0);
        }
        
        .counter {
            font-size: 36px;
            font-weight: 700;
            color: #00f2fe;
        }
        
        @media (max-width: 480px) {
            .container {
                padding: 15px;
            }
            
            h1 {
                font-size: 24px;
            }
            
            .card {
                padding: 20px;
            }
            
            .flip-card-value {
                font-size: 36px;
            }
        }
    </style>
</head>
<body>
    <div id="particles-js"></div>
    
    <div class="container">
        <div class="header">
            <div class="logo">
                <i class="fab fa-zhihu"></i>
            </div>
            <h1>知乎 · 2024 年度报告</h1>
            <p class="subtitle">记录你在知乎的探索与成长</p>
        </div>
        
        <div class="card animated-text">
            <div class="card-header">
                <div class="card-icon">
                    <i class="fas fa-calendar-alt"></i>
                </div>
                <div>
                    <div class="card-title">时间足迹</div>
                    <div class="card-subtitle">你在知乎的旅程</div>
                </div>
            </div>
            
            <div class="stats">
                <div class="stat-item">
                    <div class="stat-value">1126</div>
                    <div class="stat-label">总天数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">342</div>
                    <div class="stat-label">活跃天数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">94%</div>
                    <div class="stat-label">超过知友</div>
                </div>
            </div>
            
            <div class="progress-bar">
                <div class="progress" style="width: 86%"></div>
            </div>
            <div style="text-align: center; margin-top: 5px; color: #a0b3d6; font-size: 14px;">
                你在知乎的活跃度超过 86% 的用户
            </div>
        </div>
        
        <div class="flip-card animated-text">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="flip-card-title">你的年度阅读量</div>
                    <div class="counter">0</div>
                    <div class="flip-card-desc">点击卡片查看详情</div>
                </div>
                <div class="flip-card-back">
                    <div class="flip-card-title">阅读成就</div>
                    <div class="flip-card-value">1,248,756</div>
                    <div class="flip-card-desc">字，相当于 15 本《三体》</div>
                </div>
            </div>
        </div>
        
        <div class="card animated-text">
            <div class="card-header">
                <div class="card-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div>
                    <div class="card-title">内容贡献</div>
                    <div class="card-subtitle">你的创作与互动</div>
                </div>
            </div>
            
            <div class="chart-container">
                <canvas id="contributionChart"></canvas>
            </div>
            
            <div class="stats">
                <div class="stat-item">
                    <div class="stat-value">127</div>
                    <div class="stat-label">回答</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">24</div>
                    <div class="stat-label">文章</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">3,842</div>
                    <div class="stat-label">赞同</div>
                </div>
            </div>
        </div>
        
        <div class="card animated-text">
            <div class="card-header">
                <div class="card-icon">
                    <i class="fas fa-tags"></i>
                </div>
                <div>
                    <div class="card-title">兴趣领域</div>
                    <div class="card-subtitle">你最关注的话题</div>
                </div>
            </div>
            
            <div class="tag-cloud">
                <div class="tag">人工智能</div>
                <div class="tag">科技</div>
                <div class="tag">心理学</div>
                <div class="tag">历史</div>
                <div class="tag">电影</div>
                <div class="tag">投资</div>
                <div class="tag">美食</div>
                <div class="tag">旅行</div>
            </div>
            
            <div style="text-align: center; margin-top: 20px; color: #a0b3d6; font-size: 14px;">
                你关注了 28 个话题，阅读了 156 个领域的内容
            </div>
        </div>
        
        <div class="flip-card animated-text">
            <div class="flip-card-inner">
                <div class="flip-card-front">
                    <div class="flip-card-title">最热门回答</div>
                    <div style="font-size: 16px; margin-top: 10px;">关于人工智能的未来</div>
                    <div class="flip-card-desc">点击查看详情</div>
                </div>
                <div class="flip-card-back">
                    <div class="flip-card-title">热门回答数据</div>
                    <div class="flip-card-value">1,842</div>
                    <div class="flip-card-desc">赞同 · 356 条评论</div>
                    <div style="margin-top: 15px; font-size: 14px;">被收录于「人工智能」圆桌精选</div>
                </div>
            </div>
        </div>
        
        <button class="btn" id="shareBtn">
            <i class="fas fa-share-alt"></i> 生成年度报告卡片
        </button>
        
        <div class="footer">
            <p>知乎 · 发现更大的世界</p>
            <p>数据统计周期: 2024年1月1日 - 2024年12月31日</p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
        // 粒子背景配置
        particlesJS('particles-js', {
            particles: {
                number: { value: 60, density: { enable: true, value_area: 800 } },
                color: { value: "#4facfe" },
                shape: { type: "circle" },
                opacity: { value: 0.3, random: true },
                size: { value: 3, random: true },
                line_linked: {
                    enable: true,
                    distance: 150,
                    color: "#4facfe",
                    opacity: 0.1,
                    width: 1
                },
                move: {
                    enable: true,
                    speed: 1,
                    direction: "none",
                    random: true,
                    straight: false,
                    out_mode: "out"
                }
            },
            interactivity: {
                detect_on: "canvas",
                events: {
                    onhover: { enable: true, mode: "grab" },
                    onclick: { enable: true, mode: "push" },
                    resize: true
                }
            }
        });
        
        // 初始化图表
        const ctx = document.getElementById('contributionChart').getContext('2d');
        const chart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                datasets: [{
                    label: '回答数',
                    data: [8, 10, 12, 14, 16, 18, 15, 12, 10, 8, 6, 4],
                    backgroundColor: 'rgba(79, 172, 254, 0.7)',
                    borderColor: 'rgba(79, 172, 254, 1)',
                    borderWidth: 1
                }, {
                    label: '文章数',
                    data: [1, 2, 3, 2, 3, 4, 3, 2, 1, 2, 3, 2],
                    backgroundColor: 'rgba(0, 242, 254, 0.7)',
                    borderColor: 'rgba(0, 242, 254, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        labels: {
                            color: '#a0b3d6'
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(255, 255, 255, 0.05)'
                        },
                        ticks: {
                            color: '#a0b3d6'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#a0b3d6'
                        }
                    }
                }
            }
        });
        
        // 滚动动画
        document.addEventListener('DOMContentLoaded', function() {
            // 计数器动画
            let counter = document.querySelector('.counter');
            let target = 1248756;
            let count = 0;
            let duration = 3000; // 3 seconds
            let increment = target / (duration / 16); // 60fps
            
            function updateCounter() {
                if (count < target) {
                    count += increment;
                    if (count > target) count = target;
                    counter.textContent = Math.floor(count).toLocaleString();
                    requestAnimationFrame(updateCounter);
                }
            }
            
            // 滚动检测
            const animatedElements = document.querySelectorAll('.animated-text');
            
            function checkScroll() {
                animatedElements.forEach(element => {
                    const elementTop = element.getBoundingClientRect().top;
                    const windowHeight = window.innerHeight;
                    
                    if (elementTop < windowHeight - 50) {
                        element.classList.add('animate');
                    }
                });
            }
            
            // 初始检查
            checkScroll();
            
            // 监听滚动
            window.addEventListener('scroll', checkScroll);
            
            // 启动计数器
            setTimeout(updateCounter, 1000);
            
            // 分享按钮事件
            document.getElementById('shareBtn').addEventListener('click', function() {
                this.innerHTML = '<i class="fas fa-check"></i> 生成成功！可前往分享';
                this.style.background = 'linear-gradient(135deg, #00c853, #64dd17)';
                
                // 模拟分享功能
                setTimeout(() => {
                    alert('年度报告卡片已生成！您可以保存图片或分享到社交平台。');
                }, 500);
            });
        });
    </script>
</body>
</html>